Week 3- Module 2a - Web-based Mapping Clients. Google Maps API

Outline

What is an API

An Application Programming Interface (API) is a particular set of rules and specifications that a software program can follow to access and make use of the services and resources provided by another particular software program that implements that API. It serves as an interface between different software programs and facilitates their interaction, similar to the way the user interface facilitates interaction between humans and computers. – From Wikipedia: http://en.wikipedia.org/wiki/Api

Google Maps API Version

Reference Information

Google Maps API Family
http://code.google.com/apis/maps/
Javascript API Home Page
https://developers.google.com/maps/documentation/javascript/?csw=1
Javascript API v3 Tutorial Page
http://code.google.com/apis/maps/documentation/javascript/tutorial.html

Key Components

Types (required)
ROADMAP
SATELLITE
HYBRID
TERRAIN
Latitude and Longitude (required)
specification of where the map should initially be centered
Zoom Level (required)
0=global, higher values increasingly local. Limited by map type

Controls

Overlays

Overlay Types documentation

Marker
points depicted by specified or defined icons at locations within the map (reference)
Polyline
linear features defined by multiple points with a defined style for the line (reference)
Polygon
closed features defined by multiple points. Supports multi-polygons, and donuts. Line and fill styles may be specified. (reference)
(Ground) Overlay Maps
Image-based map layers that replace or overlay Google layers - registered to the map coordinates (reference)
Info Windows
floating content windows for displaying content defined as HTML, a DOM element, or text string (reference)
Layers
Grouped display content assigned to a specific layer type: Data (including GeoJSON), KmlLayer (& GeoRSS), Heatmap, FusionTablesLayer, TrafficLayer, TransitLayer, BicyclingLayer (reference)
Custom Overlays
definition of programmatically controlled layers (reference)

Services

Events

Examples

Simple - Roadmap

gmaps01.html preview 

Simple - Roadmap Code

gmaps01.html

mapPage.css

mapPage_01.js

Simple - Satellite

gmaps02.html preview 

Simple - Satellite Code

gmaps02.html

mapPage_02.js

Simple - Hybrid

gmaps03.html preview 

Simple - Hybrid Code

gmaps03.html

mapPage_03.js

Simple - Terrain

gmaps04.html preview 

Simple - Terrain Code

gmaps04.html

mapPage_04.js

Simple - Hybrid - Zoomed

gmaps05.html preview 

Simple - Hybrid - Zoomed Code

gmaps05.html

mapPage_05.js

Simple - Zoomed - Modified Controls

gmaps06.html preview 

Simple - Zoomed - Modified Controls Code

gmaps06.html

mapPage_06.js

Markers

gmaps07.html preview 

Markers Code

gmaps07.html

mapPage_07.js

Polyline

gmaps08.html preview 

Polyline Code

gmaps08.html

mapPage_08.js

Polygon

gmaps09.html preview 

Polygon Code

gmaps09.html

mapPage_09.js

Adding an Info Window

gmaps10.html preview 

Adding an Info Window Code

gmaps10.html

mapPage_10.js

function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var office = new google.maps.LatLng(35.084506,-106.624899)
    var myOptions = {
        zoom: 18,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.HYBRID
        };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), 
        myOptions);
    var classroomMarker = new google.maps.Marker({
        position: classroom,
        title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
        });
    classroomMarker.setMap(map);
    var officeMarker = new google.maps.Marker({
        position: office,
        title:"Office, Bandelier West, Room 107"
        });
    officeMarker.setMap(map); 
    var buildingCoordinates = [
        new google.maps.LatLng(35.084498,-106.624921),
        new google.maps.LatLng(35.084558,-106.624911),
        new google.maps.LatLng(35.084566,-106.624970),
        new google.maps.LatLng(35.084609,-106.624966),
        new google.maps.LatLng(35.084544,-106.624383),
        new google.maps.LatLng(35.084438,-106.624317),
        new google.maps.LatLng(35.084384,-106.623922),
        new google.maps.LatLng(35.084164,-106.623970),
        new google.maps.LatLng(35.084214,-106.624324),
        new google.maps.LatLng(35.084214,-106.624324),
        new google.maps.LatLng(35.084391,-106.624284)
        ];
    var bldgPoly = new google.maps.Polygon({
        paths: buildingCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35
        });
    bldgPoly.setMap(map);
    var classInfoContent = '<div class="infoBox">' +
        '<p>This is the location for the Geography 485L/585L class</p>' +
        '</div>'
    var classInfoWindow = new google.maps.InfoWindow({
        content: classInfoContent
        });
    google.maps.event.addListener(classroomMarker, 'click', function() {
        classInfoWindow.open(map,classroomMarker);
        });
    var bldgInfoContent = '<div class="infoBox">' +
        '<p>This is the location of Bandelier East and West on the UNM Campus</p>' +
        '<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2sus!4v1486322485343!6m8!1m7!1sneDc4DwioOJ-TytixzvJEg!2m2!1d35.08459518161192!2d-106.6243050674837!3f207.5327084691508!4f-4.850942482843806!5f0.7820865974627469" width="300" height="225" frameborder="0" style="border:0" allowfullscreen></iframe>' +
        '</div>'
    var bldgInfoWindow = new google.maps.InfoWindow({
        content: bldgInfoContent
        });
    google.maps.event.addListener(bldgPoly, 'click', function() {
        var position = new google.maps.LatLng(35.084438,-106.624317)
        bldgInfoWindow.setPosition(position)
        bldgInfoWindow.open(map);
        });
}


Creative Commons License
This work by Karl Benedict is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.